<template>
    <div class="property" :class="readonly ? 'readonly_true' : ''">
        <!-- <div class="item_name" :title="`${property.name}(${property.description})`" v-if="propertyName !== '二维坐标'">{{
        property.name }}</div> -->
        <div class="readonly_flag">
            <Number2sProp v-model="number2sRef" :propertyName="propertyName" :defaultValue="defaultValue"
                :readonly="readonly" :withUndefined="withUndefined">
            </Number2sProp>
        </div>
    </div>
</template>

<script setup lang="ts">
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { onBeforeUnmount } from "vue";
import { PropertyCompCallbackFuncParamsType } from "./base";
import Number2sProp from "../commons/Number2sProp.vue"

const props = withDefaults(defineProps<{
    property: any
}>(), {
});
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();
type Number2s = [number, number][]
const { property } = props
const readonly = property.readonly
const propertyName = property.name
const withUndefined = property.withUndefined;
const defaultValue = property.defaultValue ?? [];
const disposer = createVueDisposer(onBeforeUnmount)
const number2sRef = readonly ? toReadonlyVueRef<Number2s | undefined>(disposer, property.reactVar, s => s && ([...s] as Number2s)) : toVR<Number2s | undefined>(disposer, property.reactVar, s => s && ([...s] as Number2s))

</script>
<style scoped>
.property {
    width: 100%;
    display: flex;
}

.item_name {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
    height: 26px;
    line-height: 26px;
}

.readonly_flag {
    flex: 1;
}

.readonly_true {
    cursor: not-allowed;
    cursor: no-drop;
}
</style>
